<!--
 * @Author: 黑白灰01 3193273703@qq.com
 * @Date: 2025-02-07 22:55:47
 * @LastEditors: 黑白灰01 3193273703@qq.com
 * @LastEditTime: 2025-02-13 22:59:19
 * @FilePath: /hei_picture_web/src/page/user/modal/userInfoCard.vue
 * @Description: 用户信息卡片
-->
<template>
  <div class="user-info-card">
    <a-typography-paragraph type="secondary">用户id:{{ userInfoData.id }}</a-typography-paragraph>
    <a-form
      layout="vertical"
      class="user-info-card-form"
      width="200px"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
      :model="userInfoData"
      @submit="handleSubmit"
    >
      <a-form-item label="用户账号">
        <a-input v-model:value="userInfoData.userAccount" :disabled="true" />
      </a-form-item>
      <a-form-item label="用户名">
        <a-input v-model:value="userInfoData.userName" />
      </a-form-item>
      <a-form-item label="用户头像">
        <a-upload
          list-type="picture-card"
          :show-upload-list="false"
          :custom-request="handleUpload"
          :before-upload="beforeUpload"
        >
          <img
            style="width: 100%; height: 100%; object-fit: cover"
            v-if="userInfoData.userAvatar"
            :src="userInfoData.userAvatar"
            alt="avatar"
          />
          <div v-else>
            <Loading3QuartersOutlined v-if="loading"></Loading3QuartersOutlined>
            <PlusOutlined v-else></PlusOutlined>
            <div class="ant-upload-text">点击或拖拽上传图片</div>
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item label="用户简介">
        <a-textarea
          v-model:value="userInfoData.userProfile"
          :placeholder="'请输入简介'"
          :auto-size="{ minRows: 2, maxRows: 5 }"
        />
      </a-form-item>
      <a-button type="primary" html-type="submit"> 提交 </a-button>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Loading3QuartersOutlined, PlusOutlined } from '@ant-design/icons-vue'
import type { UploadFile } from 'ant-design-vue'
import { message } from 'ant-design-vue'
import { uploadPictureUsingPost } from '@/api/pictureController.ts'
import { editUserUsingPut } from '@/api/userController'
interface UserInfoCardProps {
  userInfoData: API.UserVO | undefined
}

const props = defineProps<UserInfoCardProps>()
const userInfoData = ref<API.UserVO>(props.userInfoData || {})
const loading = ref(false)
const handleSubmit = async () => {
  console.log(userInfoData.value)
  const params: API.UserUpdateRequest = {
    id: userInfoData.value.id,
    userName: userInfoData.value.userName,
    userProfile: userInfoData.value.userProfile,
    userAvatar: userInfoData.value.userAvatar,
  }
  const { data: res } = await editUserUsingPut(params)
  if (res.code === 200) {
    message.success('修改成功')
  } else {
    message.error('修改失败')
  }
}

/**
 * 上传图片
 * @param options
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleUpload = async (options: any) => {
  loading.value = true
  try {
    const res = await uploadPictureUsingPost({}, {}, options.file)

    // 这里使用类型断言 as，让 TypeScript 知道 data 是一个对象
    const responseData = res.data as { code?: number; message?: string; data?: API.PictureVO }

    if (responseData?.code === 200 && responseData?.data) {
      message.success('图片上传成功')
      // 将上传成功的图片信息传递给父组件
      userInfoData.value.userAvatar = responseData.data.url
    } else {
      message.error('图片上传失败，' + (responseData?.message ?? '未知错误'))
    }
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
  } catch (error: any) {
    console.error('图片上传失败', error)
    message.error('图片上传失败，' + (error?.message ?? '未知错误'))
  }
  loading.value = false
}

/**
 * 上传前的校验
 * @param file
 */
const beforeUpload = (file: UploadFile) => {
  // 校验图片格式
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
  if (!isJpgOrPng) {
    message.error('不支持上传该格式的图片，推荐 jpg 或 png')
    return false
  }
  // 校验图片大小
  if (!file.size) {
    message.error('无法获取文件大小')
    return false
  }
  const isLt2M = file.size / 1024 / 1024 < 5
  if (!isLt2M) {
    message.error('不能上传超过 5M 的图片')
    return false
  }
  return true
}
</script>

<style scoped lang="scss">
.user-info-card {
  .user-info-card-from {
    .user-info-card-avatar {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      overflow: hidden;
    }
    .user-info-card-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .user-info-card-info-name {
        font-size: 20px;
      }
    }
  }
}
</style>
